<script lang="ts" setup>
import { usePageTitle } from '@/use/usePageTitle';
import { rsaEncryption } from '@/utils';
import { useSubmit } from '@/views/user/use/use-submit';
import { trimBlank } from '@vc/utils';
import MainContainer from '../components/main.vue';
import type { FormInstance } from 'element-plus';
import UserFormItem from '../components/user-form-item.vue';
import PhoneCode from '../components/phone-code.vue';
import PwdFormItem from '../components/pwd-form-item.vue';
import { rules, checkPwdSame, pageCfg } from '../config';
import { LINK_LOGIN } from '@/router/constants';

usePageTitle();

// 表单数据
const formData = reactive({
  account: '',
  password: '',
  rePassword: '',
  verifyCode: ''
});

const ruleFormRef = ref<FormInstance>();

const { loading, errMess, handleClick } = useSubmit();

/** 提交 */
const handleSubmit = async() => {
  return await handleClick(ruleFormRef.value, {
    password: rsaEncryption.encrypt(formData.password),
    phone: trimBlank(formData.account, 'all'),
    smsVerifyCode: formData.verifyCode
  }, '', null, true);
};
</script>

<template>
  <main-container>
    <p class="mb-22px text-left">忘记密码</p>
    <el-form ref="ruleFormRef" :model="formData" @keypress.enter="handleSubmit(ruleFormRef)">
      <!--account-->
      <div class="input-style">
        <user-form-item v-model:account="formData.account" v-model:errorMess="errMess.account" />
        <phone-code prefixIcon="vi-yanzheng" :form="ruleFormRef" v-model:verifyCode="formData.verifyCode" :phone="formData.account" smsType="changePw" v-model:errorMess="errMess.code" v-model:errorAccountMess="errMess.account" />
      <!--code-->
      <!--pwd-->
        <pwd-form-item v-model:password="formData.password" />
        <pwd-form-item v-model:rePassword="formData.rePassword" propName="rePassword" :rules="[...rules.regForgotPwd, checkPwdSame(formData.password)]" :placeholder="pageCfg.rePwaPlaceholder" />
      </div>
     <!--submit-->
      <el-form-item>
        <div class="w-full flex justify-between mt-38px">
          <el-button :loading="loading" class="change_color w-[80%] h-52px bg-[#02C680] border-0 text-18px font-500 leading-21px" type="primary" @click="handleSubmit(ruleFormRef)">修改密码</el-button>
          <vc-link type="primary" :route="LINK_LOGIN" :underline="false" class="text-[#02C680]">返回登录</vc-link>
        </div>
      </el-form-item>
    </el-form>
  </main-container>
</template>

<style lang="scss" scoped>
  @import '../index.scss';
  :deep(.input-style) {
    .el-form-item {
      margin-bottom: 24px;
    }
    .vc-input {
      height: 52px;
      font-size: 16px;
      flex: 1;
      // width: 100%;
      input::-webkit-input-placeholder {
        color: rgba(153, 153, 153, 1);
      }
      .vc-input__wrapper {
        padding-left: 16px;
        background: rgba(243, 243, 243, 0.6);
        .vc-icon {
          width: 20px;
          height: 20px;
          margin-right: 16px;
        }
        .vc-input__inner {
          width: 96px;
          font-weight: 400;
          color: #999999;
          line-height: 19px;
      }
      }
    }
    .vc-image {
      width: 102px;
      height: 52px;
      margin-left: 12px;
      border-radius: 4px 4px 4px 4px;
    }
    .el-button {
      color:#02C680;
      height: 52px;
      font-size: 16px;
      background-color: rgba(2, 198, 128, 0.10);
      margin-left: 12px;
      padding: 19px 11px;
      font-weight: 500;
      line-height: 14px;
      border: 0;
    }
  }
  :deep(.change_color){
    &:hover{
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
    &:active {
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
    &:focus {
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
  }
</style>
